<template>
  <div class="footer">
    <van-tabbar  v-model="active" fixed @change="change">
      <van-tabbar-item icon="shop" to="/home">
        <span>首页</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? icon.active_home : icon.normal_home" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="shop" to="/type">
        <span>分类</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? icon.active_type : icon.normal_type" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="shop" to="/shopCart">
        <span>购物车</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? icon.active_shopCart : icon.normal_shopCart" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="shop" to="/person">
        <span>我的</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? icon.active_person : icon.normal_person" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	 data() {
    return {
      active:Number(this.$store.state.tab_active),
      icon: {
        normal_home: require('../../../public/images/tab/home.png'),
        active_home: require('../../../public/images/tab/home_hover.png'),
        normal_type: require('../../../public/images/tab/type.png'),
        active_type: require('../../../public/images/tab/type_hover.png'),
        normal_shopCart: require('../../../public/images/tab/shopCart.png'),
        active_shopCart: require('../../../public/images/tab/shopCart_hover.png'),
        normal_person: require('../../../public/images/tab/person.png'),
        active_person: require('../../../public/images/tab/person_hover.png')
      }
    }
  },
  created(){

  },
  computed: mapState({
      actives: 'tab_active',
  }),
   methods: {
     change(index){
       this.$store.state.tab_active=index;
     }
  }
}
</script>

<style>

</style>
